<template>
  <div class="cinema-page">
    <!-- 头部导航（包含登录、退出等功能，这里简单示意） -->
    <div class="header">
      <button v-if="!isLoggedIn" @click="showLoginModal">登录</button>
      <button v-if="isLoggedIn" @click="logout">退出</button>
      <span>{{ isLoggedIn? `欢迎，${username}` : '未登录' }}</span>
    </div>
    <!-- 电影列表 -->
    <div class="movie-list">
      <div v-for="movie in movies" :key="movie.id" class="movie-item">
        <img :src="movie.poster" alt="电影海报">
        <h3>{{ movie.title }}</h3>
        <p>评分: {{ movie.rating }}</p>
        <button @click="showMovieDetails(movie)">查看详情</button>
      </div>
    </div>
    <!-- 登录模态框（初始隐藏） -->
    <div v-if="showLoginModal" class="login-modal">
      <div class="login-modal-content">
        <h3>登录</h3>
        <input type="text" placeholder="用户名" v-model="loginUsername">
        <input type="password" placeholder="密码" v-model="loginPassword">
        <button @click="login">登录</button>
        <button @click="hideLoginModal">取消</button>
      </div>
    </div>
    <!-- 电影详情展示（初始隐藏） -->
    <div v-if="showDetails" class="movie-details">
      <h2>{{ currentMovie.title }}</h2>
      <p>评分: {{ currentMovie.rating }}</p>
      <img :src="currentMovie.poster" alt="电影海报">
      <p>简介: {{ currentMovie.description }}</p>
      <!-- 场次选择 -->
      <div class="showtime-list">
        <h3>场次：</h3>
        <button
          v-for="showtime in currentMovie.showtimes"
          :key="showtime.id"
          @click="selectShowtime(showtime)"
          :class="{ active: showtime === selectedShowtime }"
        >
          {{ showtime.time }}
        </button>
      </div>
      <!-- 座位表（根据场次选择显示对应座位情况） -->
      <div v-if="selectedShowtime" class="seat-table-container">
        <h4>座位表</h4>
        <table>
          <thead>
            <tr>
              <th v-for="col in seatCols" :key="col">{{ col }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(row, rowIndex) in seatRows" :key="rowIndex">
              <td v-for="col in seatCols" :key="`${rowIndex}-${col}`">
                <button
                  :class="{'occupied': isSeatOccupied(rowIndex, col)}"
                  :disabled="isSeatOccupied(rowIndex, col)"
                  @click="selectSeat(rowIndex, col)"
                >
                  {{ getSeatLabel(rowIndex, col) }}
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <p>已选座位: <span v-for="seat in selectedSeats" :key="seat">{{ seat }}</span></p>
      </div>
      <button @click="bookTickets">预订</button>
      <button @click="hideMovieDetails">返回</button>
      <!-- 支付相关提示框和按钮 -->
      <div v-if="showPaymentModal" class="payment-modal">
        <div class="payment-modal-content">
          <h3>支付订单</h3>
          <p>总金额：{{ totalPrice }} 元</p>
          <p>电影：{{ currentMovie.title }}</p>
          <p>场次：{{ selectedShowtime.time }}</p>
          <p>座位：{{ selectedSeats.join(', ') }}</p>
          <button @click="pay()">确认支付</button>
          <button @click="cancelPayment()">取消支付</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
name: "CinemaPage",
data() {
  return {
    movies: [], // 存储电影列表数据
    showLoginModal: false, // 控制登录模态框显示隐藏的变量
    loginUsername: "", // 登录用户名输入框绑定的值
    loginPassword: "", // 登录密码输入框绑定的值
    isLoggedIn: false, // 标记用户是否登录
    username: "", // 登录后的用户名显示
    showDetails: false, // 控制电影详情是否显示
    currentMovie: {}, // 当前查看详情的电影对象
    selectedShowtime: null, // 选择的场次
    seatRows: 10, // 座位行数
    seatCols: ["A", "B", "C", "D", "E"], // 座位列标识
    seatStatus: {}, // 座位占用状态
    selectedSeats: [], // 已选座位列表
    showPaymentModal: false, // 控制支付模态框显示隐藏的变量
  };
},
computed: {
  totalPrice() {
    // 假设每个座位30元，计算总金额
    return this.selectedSeats.length * 30;
  },
},
mounted() {
  // 模拟调用接口获取电影数据，实际中替换为真实的axios等请求
  this.movies = [
    {
      id: 1,
      title: "电影1",
      rating: 8.5,
      poster: "../public/可选.png",
      description: "这是一部精彩的电影1",
      showtimes: [
        { id: 1, time: "10:00" },
        { id: 2, time: "13:30" },
        { id: 3, time: "16:00" }
      ]
    },
    {
      id: 2,
      title: "电影2",
      rating: 7.8,
      poster: "../public/可选.png",
      description: "这是一部有趣的电影2",
      showtimes: [
        { id: 4, time: "11:00" },
        { id: 5, time: "14:30" },
        { id: 6, time: "17:00" }
      ]
    }
  ];
},
methods: {
  showMovieDetails(movie) {
    this.showDetails = true;
    this.currentMovie = movie;
    // 每次查看新电影详情时，重置相关选择状态
    this.selectedShowtime = null;
    this.selectedSeats = [];
    this.initSeatStatus();
  },
  hideMovieDetails() {
    this.showDetails = false;
  },
  selectShowtime(showtime) {
    this.selectedShowtime = showtime;
  },
  initSeatStatus() {
    // 模拟随机设置一些座位为已占用
    for (let row = 0; row < this.seatRows; row++) {
      for (let col of this.seatCols) {
        const seatKey = `${row}-${col}`;
        this.seatStatus[seatKey] = Math.random() < 0.3; // 30%概率座位被占用
      }
    }
  },
  isSeatOccupied(rowIndex, col) {
    const seatKey = `${row}-${col}`;
    return this.seatStatus[seatKey] || false;
  },
  getSeatLabel(rowIndex, col) {
    return `${rowIndex + 1}-${col}`;
  },
  selectSeat(rowIndex, col) {
    const seat = `${rowIndex + 1}-${col}`;
    const index = this.selectedSeats.indexOf(seat);
    if (index > -1) {
      // 如果座位已选，移除它
      this.selectedSeats.splice(index, 1);
    } else {
      // 否则添加到已选座位列表
      this.selectedSeats.push(seat);
    }
  },
  bookTickets() {
    if (this.selectedShowtime && this.selectedSeats.length > 0) {
      // 满足预订条件，显示支付模态框
      this.showPaymentModal = true;
    } else {
      alert("请选择场次和座位后再预订");
    }
  },
  pay() {
    // 模拟支付成功逻辑，这里可以对接真实支付平台接口，比如调用后端接口传递支付相关数据等
    console.log("支付成功！");
    // 支付成功后，隐藏支付模态框，可重置相关选择状态等
    this.showPaymentModal = false;
    this.selectedShowtime = null;
    this.selectedSeats = [];
  },
  cancelPayment() {
    // 取消支付，隐藏支付模态框
    this.showPaymentModal = false;
  },
  showLoginModal() {
    this.showLoginModal = true;
  },
  hideLoginModal() {
    this.showLoginModal = false;
  },
  login() {
    // 模拟登录验证，实际中需对接后端接口验证用户名和密码
    if (this.loginUsername === "admin" && this.loginPassword === "123456") {
      this.isLoggedIn = true;
      this.username = this.loginUsername;
      this.hideLoginModal();
    } else {
      alert("用户名或密码错误");
    }
  },
  logout() {
    this.isLoggedIn = false;
    this.username = "";
  }
}
};
</script>
<style scoped>
.cinema-page {
padding: 20px;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}

.login-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.login-modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}

.movie-list {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}

.movie-item {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
text-align: center;
}

.movie-details {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}

.showtime-list button {
margin-right: 10px;
padding: 5px 10px;
}

.showtime-list button.active {
background-color: #ccc;
color: white;
}

.seat-table-container {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
}

table {
border-collapse: collapse;
width: 100%;
}

th,
td {
border: 1px solid #ccc;
padding: 5px;
text-align: center;
}

.occupied {
background-color: #ccc;
color: white;
}

.payment-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}

.payment-modal-content {
background-color: white;
padding: 20px;
border-radius: 5px;
text-align: center;
}
</style>